<template>
  <view class="page">
	<view class="box-floor">
		<view class="active-list">
			<view class="item">
				<view class="item-pic">
					<image src="http://127.0.0.1:32767/10.27.34/images/%E9%A6%96%E9%A1%B5/u85.svg"></image>
				</view>
				<view class="item-msg">
					<view class="item-title u-line-2">
						非翔教育第一期夏令营活动召集令
					</view>
					<view class="item-detail">
						<view class="item-status">活动报名中</view>
						<view class="item-num">剩余<text>25</text>个名额</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-pic">
					<image src="http://lorempixel.com/200/200"></image>
				</view>
				<view class="item-msg">
					<view class="item-title u-line-2">
						非翔教育第一期夏令营活动召集令
					</view>
					<view class="item-detail">
						<view class="item-status">活动报名中</view>
						<view class="item-num">剩余<text>25</text>个名额</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-pic">
					<image src="http://lorempixel.com/200/200"></image>
				</view>
				<view class="item-msg">
					<view class="item-title u-line-2">
						非翔教育第一期夏令营活动召集令
					</view>
					<view class="item-detail">
						<view class="item-status status-1">活动进行中</view>
					</view>
				</view>
			</view>
		</view>
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  onLoad() {},
  methods: {},
};
</script>

<style lang="scss">
.page{
	padding-bottom: 50rpx;
}
image{
	width: 100%;
	height: 100%;
}
.box-floor{
	margin-top: 20rpx;
	background: #fff;
	padding: 0 30rpx;
	.hd-title{
		margin-bottom: 20rpx;
		font-size: 36rpx;
		display: flex;
		justify-items: center;
		justify-content: space-between;
		.link-more{
			font-size: 26rpx;
			color: #999;
			display: flex;
			align-items: center;
		}
	}
}
.active-list{
	.item:first-child{
		border-top: none;
	}
	.item{
		display: flex;
		padding: 20rpx 0;
		border-top: solid 1rpx #ddd;
		.item-pic{
			width: 140rpx;
			height: 140rpx;
			border-radius: 20rpx;
			overflow: hidden;
			margin-right: 20rpx;
			flex-shrink: 1;
			background: #f0f0f0;
		}
		.item-msg{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			.item-title{
				font-size: 32rpx;
			}
			.item-detail{
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.item-status{
					color: #f00;
				}
				.item-status.status-1{
					color: $uni-color-theme;
				}
				.item-num{
					color: #999;
					font-size: 24rpx;
					text{
						color:#f00;
					}
				}
			}
		}
	}
}
</style>
